<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html ;charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>549周兆丰</title>

    <link rel="stylesheet" type="text/css" href="../static/css/jquery.mobile.flatui.css" th:href="@{/css/jquery.mobile.flatui.css}"/>
    <script src="..static/js/jquery-2.1.4.min.js" th:src="@{/js/jquery-2.1.4.min.js}"></script>
    <script src="../static/js/jquery.mobile-1.4.5.min.js" th:src="@{/js/jquery.mobile-1.4.5.min.js}"></script>
</head>

<body>

<div data-role="page" id="musicpage" style="background-color:bisque" data-ajax=“false”>

    <audio id="music_player" preload="auto" style=" display:none;">
        <source id="source_ogg" src="song.ogg" type="audio/ogg"/>
        <source id="source_mp3" src="../static/music/no1.mp3" th:src="@{/music/no1.mp3}"type="audio/mpeg"/>
    </audio>

    <div data-role="header" data-position="fixed" data-theme="b">

        <h1>我喜欢的</h1>
    </div>

    <div data-role="content">

        <div data-role="collapsible" data-theme="d" data-collapsed-icon="flat-heart" data-expanded-icon="flat-heart"
             data-collapsed="false">
            <h3>最喜欢的歌曲</h3>

            <div data-role="controlgroup">
                <a href="#" data-role="button" data-theme="c">At The Adge</a>
                <a href="#" data-role="button" data-theme="c">
                    <img th:src="@{/img/qianban.jpg}" style="width: 100%;"/>
                </a>
                <a href="#" data-role="button" data-theme="c">千坂</a>
                <a href="#" data-role="button" data-theme="c">At The Edge</a>
                <a href="#" id="btn_play" data-role="button" onclick="onmusicplay();">播放</a>
            </div>
        </div>

        <div data-role="collapsible" data-theme="d" data-collapsed-icon="flat-heart" data-expanded-icon="flat-heart"
             data-collapsed="false">
            <h3>最喜欢的视频</h3>
            <div data-role="controlgroup">
                <iframe height=230 width=330px
                        src="https://player.bilibili.com/player.html?aid=29433952&cid=51170608&page=1" scrolling="no"
                        border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
            </div>
        </div>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="b" th:insert="include::footer">
    </div>

</div>
<script th:src="@{/js/music.js}"></script>

</body>

</html>